<script setup lang="ts">
import { defineProps } from 'vue';
    const props = defineProps({
        item: {
            type: Array,
            default: () => []
        }
    })
</script>

<template>
    <div class="task-detail">
        <h3>{{ item.task_name }}</h3>
        <p class="task-h3-position">{{ item.position_name }}</p>
        <dl>
            <dt>
                <p>任务预算</p>
                <strong>{{ item.task_budget }}元</strong>
            </dt>
            <dt>
                <p>任务周期</p>
                <strong>{{ item.task_cycle }}天</strong>
            </dt>
            <dt>
                <p>服务方式</p>
                <strong>{{ item.service_mode }}</strong>
            </dt>
        </dl>
        <h4>任务信息</h4>
        <h5>任务要求</h5>
        <p class="task-h5-text">{{ item.task_ask }}</p>
        <h4>工作保障</h4>
        <img src="@/assets/img/task/details-guarantee.png" class="task-job">
        <h4>任务来源</h4>
        <router-link :to="'/task/companySource/' + item.company_id" class="task-source">
            <img :src="item.head_img" >
            <div>
                <h5>{{ item.company_name }}</h5> 
                <p>{{ item.user_name }} .</p>
            </div>
        </router-link>

    </div>
</template>


<style scoped>
.task-detail {
    padding: 0.64rem;
    font-size: 0.69rem;
    font-weight: 100;
    color: #666;
}
h3 {
    font-size: 1.12rem;
    line-height: 1.12rem;
    font-weight: 400;
    color: #333;
}
.task-h3-position{
    line-height: 0.69rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.23rem;
    border-bottom: 1px solid #f0f0f0;
}
dl {
    display: flex;
    padding-bottom: 1.12rem;
    margin-bottom: 1.55rem;
    border-bottom: 1px solid #f0f0f0;
    padding-right: 2rem;
}
dt {
    flex: 1;
}
dl dt p {
    margin-bottom: 0.56rem;
    line-height: 0.69rem;
}
dl dt strong {
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: 500;
    color: #ff9415;
}
h4 {
    font-size: 0.96rem;
    line-height: 0.96rem;
    font-weight: 400;
    color: #333;
    margin-bottom: 0.61rem;
}
h5 {
    font-weight: 300;
    font-size: 0.8rem;
    color: #333333;
    line-height: 0.8rem;
    margin-bottom: 0.8rem;
}
.task-h5-text {
    font-weight: 100;
    font-size: 0.69rem;
    color: #333333;
    line-height: 1.23rem;
    padding-bottom: 1.3rem;
    margin-bottom: 1.33rem;
    border-bottom: 1px solid #f0f0f0;
}
.task-job {
    width: 100%;
    padding-bottom: 1.44rem;
    margin-bottom: 1.36rem;
    border-bottom: 1px solid #f0f0f0;
}
.task-source {
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
}
.task-source img {
    width: 2.67rem;
    height: 2.67rem;
    border-radius: 1.34rem;
    margin-right: 0.61rem;
}
.task-source h5 {
    margin-bottom: 0.51rem;
}
.task-source p{
    line-height: 0.69rem;
    color: #666666;
}
</style>